<template>
	<view class="user">
		<view class="top-bg">
			<view class="navbar">
				<view class="status_bar"></view>
				<view class="navbarH colorfff fs-34 bold">个人中心</view>
			</view>
			<view class="">
				<view class="status_bar"></view>
				<view style="height: 100rpx;"></view>
			</view>
			<view class="info acea-row row-between-wrapper p30" @click="goEdit">
				<view class="acea-row row-middle">
					<view class="avatar">
						<image class="imgwh" :src="userinfo.avatar" mode=""></image>
					</view>
					<view class="acea-row row-around row-column colorfff ml20">
						<view class="fs-34">{{ userinfo.nickname || '游客' }}</view>
						<view class="fs-26 mt10">ID：{{ userinfo.uid }}</view>
					</view>
				</view>
				<view class="iconfont icon-xiangyou colorfff fs-34"></view>
			</view>
			<view class="main">
				<view class="acea-row row-middle py30 bor-bot">
					<image class="user01" src="https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/serve-app/user01.png" mode="aspectFit"></image>
					<text class="fs-32 bold color333">我的订单</text>
				</view>
				<view class="acea-row row-between-wrapper py30" @click.stop="urlClick(`/pages/users/myorder?status=''`)">
					<view class="acea-row row-middle">
						<image class="user02" src="https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/serve-app/user02.png" mode="aspectFit"></image>
						<text class="fs-28 ml20 color333">全部订单</text>
					</view>
					<view class="iconfont icon-xiangyou color333 fs-30"></view>
				</view>
				<view class="acea-row row-between-wrapper mb30" @click.stop="urlClick(`/pages/users/myorder?status=1`)">
					<view class="acea-row row-middle">
						<image class="user02" src="https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/serve-app/user03.png" mode="aspectFit"></image>
						<text class="fs-28 ml20 color333">进行中</text>
					</view>
					<view class="iconfont icon-xiangyou color333 fs-30"></view>
				</view>
				<view class="acea-row row-between-wrapper mb30" @click.stop="urlClick(`/pages/users/myorder?status=9`)">
					<view class="acea-row row-middle">
						<image class="user02" src="https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/serve-app/user04.png" mode="aspectFit"></image>
						<text class="fs-28 ml20 color333">已完成</text>
					</view>
					<view class="iconfont icon-xiangyou color333 fs-30"></view>
				</view>
			<!-- 	<view class="acea-row row-between-wrapper mb30" @click.stop="urlClick(`/pages/users/myorder?status=2`)">
					<view class="acea-row row-middle">
						<image class="user05" src="https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/serve-app/user05.png" mode="aspectFit"></image>
						<text class="fs-28 ml20 color333">已取消</text>
					</view>
					<view class="iconfont icon-xiangyou color333 fs-30"></view>
				</view> -->
				<view class="acea-row row-between-wrapper mb30" @click.stop="urlClick(`/pages/users/addBox`)">
					<view class="acea-row row-middle">
						<image class="user06" src="https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/serve-app/user06.png" mode="aspectFit"></image>
						<text class="fs-28 ml20 color333">新增回收箱</text>
					</view>
					<view class="iconfont icon-xiangyou color333 fs-30"></view>
				</view>
				<!-- <view class="acea-row row-between-wrapper mb30" @click.stop="urlClick(`/pages/users/box-list`)">
					<view class="acea-row row-middle">
						<image class="user06" src="https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/serve-app/user07.png" mode="aspectFit"></image>
						<text class="fs-28 ml20 color333">回收箱列表</text>
					</view>
					<view class="iconfont icon-xiangyou color333 fs-30"></view>
				</view> -->
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		getUserInfo
	} from '@/api/user.js'
	export default {
		data() {
			return {
				userinfo:[],
				
				
			};
		},
		onShow() {
			this.getuserinfo();
		},
		methods:{
			urlClick(url){
				uni.navigateTo({
					url: url
				})
			},
			// 编辑页面
			goEdit() {
				uni.navigateTo({
					url: '/pages/users/user_info/index'
				})
			},
			getuserinfo(){
				getUserInfo().then(res=>{
					this.userinfo = res.data;
				})
			}
		}
	}
</script>

<style lang="scss">
	.user{
		
		.top-bg{
			width: 100%;
			height: 472rpx;
			background-color: #0AD08C;
			
			.navbar{
				width: 100%;
				position: fixed;
				top: 0;
				right: 0;
				left: 0;
				
				.navbarH{
					width: 100%;
					height: 100rpx;
					text-align: center;
					line-height: 100rpx;
					letter-spacing: 4rpx;
				}
			}
		
			.info{ 
				
				.avatar{
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					overflow: hidden;
					border: 2rpx solid #ffffff;
				}
			}
			
			.main{
				width: 690rpx;
				background-color: #ffffff;
				border-radius: 15rpx;
				margin: 30rpx auto;
				padding: 0 30rpx 10rpx 30rpx;
				 
				.user01{
					width: 52rpx;
					height: 52rpx;
					margin-right: 20rpx;
				}
				.user02{
					width: 58rpx;
					height: 55rpx;
				}
				.user05{
					width: 50rpx;
					height: 53rpx;
				}
				.user06{
					width: 60rpx;
					height: 60rpx;
				}
			}
		
		
		}
		
	}
</style>
